<template>
  <template v-for="(item1, index) in menuArr" :key="item1.path">
    <!-- ****递归组件---     -->
    <!-- 判断 如果有children属性-说明有 子菜单-->
    <el-sub-menu v-if="item1.children && item1.children.length != 0" :index="item1.path">
      <!-- 一级菜单的标题 -->
      <template #title>
        <el-icon><component :is="item1.meta.icon" /></el-icon>
        <span>{{ item1.meta.title }}</span>
      </template>

      <!-- 一级菜单里面的二级菜单 -->
      <!-- 生成二级菜单的子菜单-可能做判断--判断是否 二级有children属性，如果you -->
      <!-- <el-menu-item v-for="item2 in item1.children" :key="item2.path" :index="item2.path">
        <el-icon><component :is="item2.meta.icon" /></el-icon>
        <span>{{ item2.meta.title }}</span>
      </el-menu-item> -->
      <!-- *****判断 如果没有有children属性-说明有就生成sub-menu，如果没有子菜单就生成el-menu-item-->
      <!--  这个逻辑--根最外层的逻辑一样，递归调用自己 -->
      <MyMenu :menuArr="item1.children"></MyMenu>
    </el-sub-menu>

    <el-menu-item v-else :index="item1.path">
      <el-icon><component :is="item1.meta.icon" /></el-icon>
      <span>{{ item1.meta.title }}</span>
    </el-menu-item>
  </template>
</template>
<script>
//将无限级菜单 封装成一个组件 ---递归组件 （适当的时候调用自己）
// 接受一个属性 menuArr  ，用于组件内部生成无限级菜单
export default {
  props: ["menuArr"],

  //指定当前组件的name -方便 递归调用自己
  name: "MyMenu"
};
</script>
<style lang=""></style>
